{% extends "../layouts/app.html" %}

{% block title %}
  {% if topic %}
    编辑话题-{{ topic.Name }}
  {% else %}
    新建话题
  {% endif %}
{% endblock %}

{% block style %}
<link rel="stylesheet" type="text/css" href="{% static 'css/simditor.css' %}">
{% endblock %}

{% block content %}
<div class="container">
  <div class="col-md-10 offset-md-1">
    <div class="card ">

      <div class="card-body">
        <h2 class="">
          <i class="far fa-edit"></i>
          {% if topic.ID %}
            编辑话题
          {% else %}
            新建话题
          {% endif %}
        </h2>

        <hr>

        {% if topic.ID %}
          <form action="{% route 'topics.update' topic.ID %}" method="POST" accept-charset="UTF-8">
        {% else %}
          <form action="{% route 'topics.store' %}" method="POST" accept-charset="UTF-8">
        {% endif %}

            {{ csrfInput | safe }}

            {% include '../shared/_errors.html' %}

            <div class="form-group">
              <input class="form-control" type="text" name="title" placeholder="请填写标题" required
                value="{% if oldValue.title %}{{ oldValue.title }}{% else %}{{ topic.Title }}{% endif %}" />
            </div>

            <div class="form-group">
              <select class="form-control" name="category_id" required>
                <option value="" hidden disabled {% if topic.ID %}{% else %}selected{% endif %}>请选择分类</option>
                {% for cat in categories %}
                  <option value="{{ cat.ID }}" {% if topic.CategoryID == cat.ID %}selected{% endif %}>{{ cat.Name }}</option>
                {% endfor %}
              </select>
            </div>

            <div class="form-group">
              <textarea name="body" class="form-control" id="editor" rows="6" placeholder="请填入至少三个字符的内容。"
                required>{% if oldValue.body %}{{ oldValue.body }}{% else %}{{ topic.Body }}{% endif %}</textarea>
            </div>

            <div class="well well-sm">
              <button type="submit" class="btn btn-primary"><i class="far fa-save mr-2" aria-hidden="true"></i> 保存</button>
            </div>
          </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block script %}
<script type="text/javascript" src="{% static 'js/module.js' %}"></script>
<script type="text/javascript" src="{% static 'js/hotkeys.js' %}"></script>
<script type="text/javascript" src="{% static 'js/uploader.js' %}"></script>
<script type="text/javascript" src="{% static 'js/simditor.js' %}"></script>

<script>
$(document).ready(function() {
  var editor = new Simditor({
    textarea: $('#editor'),
    upload: {
      url: '{% route 'topics.upload_image' %}',
      params: {
        _csrf: '{{ csrfToken }}'
      },
      fileKey: 'upload_file',
      connectionCount: 3,
      leaveConfirm: '文件上传中，关闭此页面将取消上传。'
    },
    pasteImage: true,
  });
});
</script>
{% endblock %}
